<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-img">
        <img :src=attachImageUrl(singers.pic) alt="">
      </div>
      <div class="album-title">
        <p>{{singers.title}}</p>
      </div>
      <div class="album-info">
        <h2>简介：</h2>
        <span>
          {{singers.introduction}}
        </span>
        <!--编辑歌单-->
        <div class="pic-btn">
            <el-button type="primary" @click="setMyList">编辑歌单</el-button>
        </div>
        <!--删除歌单-->
        <div class="del-btn">
          <el-button type="primary" @click="dialogVisible = true">删除歌单</el-button>
          <el-dialog title="删除歌单" :visible.sync="dialogVisible" width="30%">
            <span>删除歌单将会删除该歌单中所有歌曲，确认删除歌单？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="delMyList">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="album-content">
      <div class="songs-body">
        <album-content :songList="listOfSongs" :is-user="true" :song-list-id="songListId">
          <template slot="title">歌单</template>
        </album-content>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'
import AlbumContent from '../components/AlbumContent'
import { mapGetters } from 'vuex'
import { HttpManager } from '../api/index'

export default {
  name: 'user-song-list-album',
  mixins: [mixin],
  components: {
    AlbumContent
  },
  data () {
    return {
      songLists: [],
      singers: {},
      count: 0, // 点赞数
      songListId: '', // 歌单ID
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters([
      'loginIn', // 登录标识
      'tempList', // 单个歌单信息
      'listOfSongs', // 存放的音乐
      'userId', // 用户ID
      'avator', // 用户头像
      'isUserList' // 是否是用户歌单
    ])
  },
  created () {
    this.songListId = this.tempList.id // 给歌单ID赋值
    this.singers = this.tempList
    this.getSongId() // 获取歌单里面的歌曲ID
  },
  methods: {
    // 收集歌单里面的歌曲Id
    getSongId () {
      HttpManager.getAllSongsOfUserByListId(this.songListId)
        .then(res => {
          // 获取歌单里的歌曲信息
          this.songLists = res
          this.$store.commit('setListOfSongs', this.songLists)
        })
        .catch(err => {
          console.log(err)
        })
    },
    setMyList () {
      this.$router.push('/user-list-setting')
    },
    delMyList () {
      this.dialogVisible = false
      let params = new URLSearchParams()
      params.append('songListId', this.songListId)
      HttpManager.deleteSongList(params).then(res => {
        if (res.code === 1) {
          this.registerForm = {}
          this.notify('删除成功', 'success')
          this.$router.push('/my-music')
        } else {
          this.notify('删除失败', 'error')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/song-list-album.scss';
</style>
